<h3>Table xEditable
   <small>Edit in place for AngularJS</small>
</h3>
<div ng-controller="TablexEditableController as table" class="container-fluid">
   <!-- Editable row-->
   <h4 class="page-header">Editable row</h4>
   <table class="table table-bordered table-hover bg-white">
      <tr style="font-weight: bold">
         <td style="width:35%">Name</td>
         <td style="width:20%">Status</td>
         <td style="width:20%">Group</td>
         <td style="width:25%">Edit</td>
      </tr>
      <tr ng-repeat="user in table.users">
         <td>
            <!-- editable username (text with validation)-->
            <span editable-text="user.name" e-name="name" e-form="rowform" onbeforesave="table.checkName($data, user.id)" e-required="">{{ user.name || &apos;empty&apos; }}</span>
         </td>
         <td>
            <!-- editable status (select-local)-->
            <span editable-select="user.status" e-name="status" e-form="rowform" e-ng-options="s.value as s.text for s in table.statuses">{{ table.showStatus(user) }}</span>
         </td>
         <td>
            <!-- editable group (select-remote)-->
            <span editable-select="user.group" e-name="group" onshow="table.loadGroups()" e-form="rowform" e-ng-options="g.id as g.text for g in table.groups">{{ table.showGroup(user) }}</span>
         </td>
         <td style="white-space: nowrap">
            <!-- form-->
            <form editable-form="" name="rowform" onbeforesave="table.saveUser($data, user.id)" ng-show="rowform.$visible" shown="table.inserted == user" class="form-buttons form-inline">
               <button type="submit" ng-disabled="rowform.$waiting" title="Save" class="btn btn-sm btn-info">
                  <em class="fa fa-save"></em>
               </button>
               <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" title="Cancel" class="btn btn-sm btn-default">
                  <em class="fa fa-times"></em>
               </button>
            </form>
            <div ng-show="!rowform.$visible" class="buttons">
               <button ng-click="rowform.$show()" title="Edit" class="btn btn-sm btn-info">
                  <em class="fa fa-pencil"></em>
               </button>
               <button ng-click="table.removeUser($index)" title="Delete" class="btn btn-sm btn-danger">
                  <em class="fa fa-trash"></em>
               </button>
            </div>
         </td>
      </tr>
   </table>
   <button ng-click="table.addUser()" class="btn btn-default">Add row</button>
   <!-- Editable column-->
   <h4 class="page-header">Editable column</h4>
   <table class="table table-bordered table-hover bg-white">
      <tr style="font-weight: bold; white-space: nowrap">
         <!-- username header-->
         <td style="width:40%">Name
            <form editable-form="" name="nameform" onaftersave="table.saveColumn('name')" ng-show="nameform.$visible">
               <button type="submit" ng-disabled="nameform.$waiting" class="btn btn-info">save</button>
               <button type="button" ng-disabled="nameform.$waiting" ng-click="nameform.$cancel()" class="btn btn-default">cancel</button>
            </form>
            <button ng-show="!nameform.$visible" ng-click="nameform.$show()" class="btn btn-link btn-default">
               <em class="fa fa-pencil text-muted"></em>
            </button>
         </td>
         <!-- status header-->
         <td style="width:30%">Status
            <form editable-form="" name="statusform" onaftersave="saveColumn('status')" ng-show="statusform.$visible">
               <button type="submit" ng-disabled="statusform.$waiting" class="btn btn-info">save</button>
               <button type="button" ng-disabled="statusform.$waiting" ng-click="statusform.$cancel()" class="btn btn-default">cancel</button>
            </form>
            <button ng-show="!statusform.$visible" ng-click="statusform.$show()" class="btn btn-link btn-default">
               <em class="fa fa-pencil text-muted"></em>
            </button>
         </td>
         <!-- group header-->
         <td style="width:30%">Group
            <form editable-form="" name="groupform" onaftersave="saveColumn('group')" ng-show="groupform.$visible">
               <button type="submit" ng-disabled="groupform.$waiting" class="btn btn-info">save</button>
               <button type="button" ng-disabled="groupform.$waiting" ng-click="groupform.$cancel()" class="btn btn-default">cancel</button>
            </form>
            <button ng-show="!groupform.$visible" ng-click="groupform.$show()" class="btn btn-link btn-default">
               <em class="fa fa-pencil text-muted"></em>
            </button>
         </td>
      </tr>
      <tr ng-repeat="user in table.users">
         <td>
            <!-- editable username (text with validation)-->
            <span editable-text="user.name" e-name="name" e-form="nameform" onbeforesave="table.checkName($data)">{{ user.name || &apos;empty&apos; }}</span>
         </td>
         <td>
            <!-- editable status (select-local)-->
            <span editable-select="user.status" e-name="status" e-form="statusform" e-ng-options="s.value as s.text for s in table.statuses">{{ table.showStatus(user) }}</span>
         </td>
         <td>
            <!-- editable group (select-remote)-->
            <span editable-select="user.group" e-name="group" onshow="table.loadGroups()" e-form="groupform" e-ng-options="g.id as g.text for g in table.groups">{{ table.showGroup(user) }}</span>
         </td>
      </tr>
   </table>
   <!-- Editable table-->
   <h4 class="page-header">Editable table</h4>
   <form editable-form="" name="tableform" onaftersave="table.saveTable()" oncancel="table.cancel()">
      <!-- table-->
      <table class="table table-bordered table-hover bg-white">
         <tr style="font-weight: bold">
            <td style="width:40%">Name</td>
            <td style="width:30%">Status</td>
            <td style="width:30%">Group</td>
            <td style="width:30%">
               <span ng-show="tableform.$visible">Action</span>
            </td>
         </tr>
         <tr ng-repeat="user in table.users | filter:table.filterUser">
            <td>
               <!-- editable username (text with validation)-->
               <span editable-text="user.name" e-form="tableform" onbeforesave="table.checkName($data, user.id)">{{ user.name || &apos;empty&apos; }}</span>
            </td>
            <td>
               <!-- editable status (select-local)-->
               <span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in table.statuses">{{ table.showStatus(user) }}</span>
            </td>
            <td>
               <!-- editable group (select-remote)-->
               <span editable-select="user.group" e-form="tableform" onshow="table.loadGroups()" e-ng-options="g.id as g.text for g in table.groups">{{ table.showGroup(user) }}</span>
            </td>
            <td>
               <button type="button" ng-show="tableform.$visible" ng-click="table.deleteUser(user.id)" class="btn btn-danger pull-right">
                  <em class="fa fa-trash"></em>
               </button>
            </td>
         </tr>
      </table>
      <!-- buttons-->
      <div class="btn-edit">
         <button type="button" ng-show="!tableform.$visible" ng-click="tableform.$show()" class="btn btn-default">edit</button>
      </div>
      <div ng-show="tableform.$visible" class="btn-form">
         <button type="button" ng-disabled="tableform.$waiting" ng-click="addUser()" class="btn btn-default pull-right">add row</button>
         <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-info">save</button>
         <button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel</button>
      </div>
   </form>
</div>